<template>
  <el-dialog
    @close="closeFun"
    :title="dialogTitle"
    :close-on-click-modal="false"
    :model-value="isVisable"
    :destroy-on-close="true"
    :append-to-body="appendToBody"
    :show-close="isClose"
    :width="dialogWidth"
    :class="customClass"
    :style="dialogStyle"
    :top="top"
    @open="openFun"
  >
    <slot></slot>
    <template #footer v-if="isFooter">
      <span class="dialog-footer">
        <el-button
          @click="closeFun"
          :size="clientWidth() ? 'small' : ''"
          v-if="isCancel"
          >{{ cancelText }}</el-button
        >
        <el-button
          type="primary"
          :disabled="disabled"
          :loading="loading"
          :size="clientWidth() ? 'small' : ''"
          @click="save"
          >{{ saveText }}</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script setup name="DialogCard">
import { clientWidth } from "@/utils/index";
const emits = defineEmits(["save", "closeDialog", "openDialog"]);

defineProps({
  dialogTitle: {
    //  dialog的标题
    type: String,
    default: "",
  },
  isVisable: {
    // 弹窗是否显示
    type: Boolean,
    default: false,
  },
  isFooter: {
    //  是否显示弹窗底部
    type: Boolean,
    default: false,
  },
  isCancel: {
    // 是否显示取消
    type: Boolean,
    default: true,
  },
  cancelText: {
    // 取消的默认文本
    type: String,
    default: "取 消",
  },
  saveText: {
    // 确定的默认文本
    type: String,
    default: "确 定",
  },
  isClose: {
    // 是否显示关闭按钮  默认true
    type: Boolean,
    default: true,
  },
  dialogWidth: {
    // 弹窗的宽度
    type: [String, Number],
  },
  customClass: {
    // 弹框的自定义类名
    type: String,
    default: "",
  },
  appendToBody: {
    // 是否挂载在body上  默认true
    type: Boolean,
    default: true,
  },
  dialogStyle: {
    // 弹窗的高度
    type: [Object],
    default: () => {},
  },
  disabled: {
    // 是否禁用按钮
    type: Boolean,
    default: false,
  },
  loading: {
    // 按钮是否等待
    type: Boolean,
    default: false,
  },
  top: {
    // 按钮是否等待
    type: String,
    default: "20vh",
  },
});

const save = () => {
  emits("save"); // 保存
};

const closeFun = () => {
  emits("closeDialog"); // 关闭弹窗
};
const openFun = () => {
  emits("openDialog");
};
</script>
<style scoped lang="scss">
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
<style lang="scss"></style>
